<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="home_container">
          <div class="home_container_left">UIN-ADMIN</div>
          <!-- 右侧 -->
          <div class="home_container_right">
            <div class="home_container_right_menu">
              <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              router
              active-text-color="#ffd04b">
               <el-menu-item index="/">首页</el-menu-item>
               <el-menu-item index="/shangpin">商品</el-menu-item>
               <el-menu-item index="/dingdan">订单</el-menu-item>
               <el-menu-item index="/huiyuan">会员</el-menu-item>
               <el-menu-item index="/shezhi">设置</el-menu-item>
            </el-menu>
            </div>
            <div class="home_container_right_exit">
              <el-dropdown class="down" @command="exit">
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">修改</el-dropdown-item>
                  <el-dropdown-item command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-header>
      <router-view/>
    </el-container>
  </div>
</template>

<script>
import {Message} from "element-ui";
import screenfull from "screenfull";
export default {
  data(){
    return{
      activeIndex2: '1'
    }
  },
  methods:{
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      exit(val){
        switch (val) {
          case "a":
            screenfull.toggle();
            break;
          case "exit":
            Message("退出成功");
            localStorage.removeItem("token");
            this.$router.push("/login");
          default:
            break;
        }
      }
  }
}
</script>
<style scoped>
.down
{
  color: aliceblue;
}

.home_container
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: space-between;
  background-color: #545c64;
}

.home_container_left
{
  width: 200px;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  background-color: #545c64;
  font-weight: bold;
}

.home_container_right
{
  width: 500px;
  height: 100%;
   box-sizing: border-box;
   display: inline-flex;
   justify-content: space-between;
  /* border: 1px solid red; */
}

.home_container_right_menu
{
  width: 350px;
  height: 100%;
  /* border: 1px solid red; */
}

.home_container_right_exit
{
  width: 100px;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid red; */
}

 .el-heade{
   height: 10vh;
   width: 100vw;
   background-color: #545c64;
  }
</style>
